<template>
  <div>
      <a-row>
        <a-col :span="12"  class='mb20'>
            <a-input  placeholder="请输入名称"  style='width:200px'  v-model='search.keyWord'/>
            <a-button type="primary" @click='pageInit()'>搜索</a-button>
        </a-col>
      </a-row>
      <a-row  class='mb20'>
        <a-col :span="6">   
              <!-- <router-link  to='/order/add'> <a-button type="primary" icon="plus-circle">录入订单</a-button></router-link> -->
          </a-col>
      </a-row>
      <a-spin   :indicator="indicator"  tip="正在加载中..."  :spinning='spinning'  :delay="delayTime">
          <a-table :columns="columns" :dataSource="data"  :pagination="pagination"    @change="handleTableChange"> 
            <span  slot = 'createTime'  slot-scope='text'>{{text | formatDate}}</span>
            <span  slot = 'receiptStatus'  slot-scope='text,record'>{{text}}/{{record.paymentStatus}}</span>
            <span  slot = 'taxRefundStatus'  slot-scope='text'>{{text | taxRefundStatus}}</span>

            <span slot="action" slot-scope="text, record">
              <!-- <router-link  to='/buyer/edit'  class='color-blue'>编辑</router-link>
              <a-divider type="vertical" /> -->
              <router-link  :to="{path:'/order/cargoadd',query:{code:record.code}}"  class='color-blue'>货单录入</router-link>
              <a-divider type="vertical" />
              <router-link  :to="{path:'/order/detail',query:{code:record.code}}"  class='color-blue'>详情</router-link>
              <a-divider type="vertical" />
              <a-popconfirm title="确认删除当前数据？" @confirm="confirmDel(record.code)"   okText="确认" cancelText="取消">
                  <a href="javascript:;"  class='color-red'>删除</a>
              </a-popconfirm>
            </span>
          </a-table>
      </a-spin>
  </div>
</template>

<script>
  import  {orderList,delOrdder }  from  '@/api/order/index'
export default {
  name: 'orderlist',
  data () {
    return {
      spinning:false,
      indicator:<a-icon type="loading-3-quarters"  spin  style="{ fontSize: '16px' }"/> ,
      delayTime:1000,
      columns:[{
        dataIndex: 'prjName',
        key: 'prjName',
        title:'项目名称',
        slots: { title: 'customTitle' },          
      }, {
        title: '订单金额',
        dataIndex: 'orderAmt',
      }, {
        title: '负责人',
        dataIndex: 'principalName',
      }, {
        title: '提单状态',
        dataIndex: 'billStatus',
      },{
        title: '收/付款',
        dataIndex: 'receiptStatus',
        scopedSlots: { customRender: 'receiptStatus' },
      },{
        title: '退税',
        dataIndex: 'taxRefundStatus',
        scopedSlots: { customRender: 'taxRefundStatus' },
      },{
        title: '创建时间',
        dataIndex: 'createTime',
        scopedSlots: { customRender: 'createTime' },
      }, {
        title: '操作',
        key: 'action',
        scopedSlots: { customRender: 'action' },
      }],
    data:[
    // {
    //     key: '1',
    //     name:'德国-外贸订单-供应商1',
    //     order: '2012523652',
    //     orderDollar: 'EUR30000',
    //     status: '待确认',
    //     createTime: '20165252',
    //     duty: '张三',
    //     lift: '未录入',
    //     back: '未录入',
    //     moneyState: '未收/已付',
    //   },
      ],
    search:{
      pageSize:10,
      pageNo:1,
      prjCode:'',
      entCode:'',
      keyWord:'',
    },
    pagination:{
          total:0,
          pageSize: 10,//每页中显示10条数据
          showSizeChanger: true,

          pageSizeOptions: ["10", "20"],//每页中显示的数据
          showTotal: total => `共有 ${total} 条数据`,  //分页中显示总的数据
        },                                                                                                
    }
  },
  created(){
    if(this.$route.query.prjCode){
      this.search.prjCode = this.$route.query.prjCode
    } 
    this.search.entCode = this.$route.query.entCode ? this.$route.query.entCode:this.$store.state.entCode  

    this.pageInit() 
  },
  methods:{
    pageInit(){
      this.spinning = true
      orderList(this.search).then((res)=>{
        this.data = res.data.dataList
        this.pagination.total = res.data.totalRs
        this.spinning = false
      })
    },
     confirmDel(code){
       delOrdder(code).then((res)=>{
        this.$message.success(res.data.msg)
        this.pageInit()
       })
    },
    handleTableChange (pagination, filters, sorter) {
        // console.log(pagination);
        this.search.pageNo = pagination.current
        this.search.pageSize =pagination.pageSize
        this.pageInit()
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.ant-input{width: 200px;}
</style>
